<template>
  <div>

  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="840px"
    destroy-on-close

  >
    <el-select
      width="100%"
      v-if="options"
      v-model="from.checkInMark"
      filterable
      remote
      clearable
      reserve-keyword
      style="width: 50%;float: left"
      placeholder="请输入入住人姓名/证件号/助记码"
      :remote-method="remoteMethod"
      @change="change"
      :loading="loading">
      <el-option

        v-for="item in options"
        :key="item.elderlyCode"
        :label="item.elderlyName"
        :value="item.elderlyCode">

        <span style="float: left;width: 24%">姓名：{{ item.elderlyName }}</span>
        <span style="width: 33%;color: #8492a6;font-size: 13px" >房间：{{ item.checkInBed}}</span>
        <span style="width: 45%;float: right; color: #8492a6; font-size: 13px">证件号：{{ item.cardNo }}</span>
      </el-option>
    </el-select>
    <el-button type="primary" style="margin-left: 20px;float: left" @click="searchitem(1,'')"  size="mini">条件查询</el-button>
    <el-table
      v-loading="listLoading"

      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      :row-key="getRowKeys"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        :reserve-selection="true"
          :selectable="isDisabled"

        width="55">
      </el-table-column>
      <el-table-column
        label="老人姓名"
        width="120">
        <template slot-scope="scope">{{ scope.row.elderlyName }}</template>
      </el-table-column>
      <el-table-column
        label="入住房间"
        width="180">
        <template slot-scope="scope">{{ scope.row.checkInBed }}</template>
      </el-table-column>
      <el-table-column
        label="证件号"
        width="220">
        <template slot-scope="scope">{{ scope.row.cardNo }}</template>
      </el-table-column>
      <el-table-column
        label="入住状态"
        width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.retreat==true">已退住</span>
          <span v-if="scope.row.retreat==false">入住中</span>

        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="操作"

        fixed="right"
      >
        <template slot-scope="scope" >
          <el-button type="text"   v-if="!scope.row.retreat&&scope.row.disable" @click="withdrawals(scope.row)">退团<i class="el-icon-download"></i></el-button>


        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :background="background"
      :current-page="queryForm.currPageNo"
      :total="total"
      :page-size="queryForm.limit"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close" >取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>

    </div>
  </el-dialog>
  <el-dialog
    title="退团"
    :visible.sync="dialogFormVisibles"
    width="500px"
    destroy-on-close

  >
    <el-form ref="form" :model="withdrawal"  label-width="100px" >



      <el-form-item label="退团原因" required >
        <el-input v-model.trim="withdrawal.quitReason"  type="textarea" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisibles=false" >取 消</el-button>
      <el-button type="primary" @click="savewithdrawal">确 定</el-button>

    </div>
  </el-dialog>
  </div>
</template>

<script>
    import {searchitem,additem,leave,searchelderlycondition} from "@/api/tasteorgan";
    export default {
        name: "additem",
        mounted() {

            this.searchitem()
            this.$parent.search()
        },

        data(){
           return{
               background:true,
               dialogFormVisible:false,
               title:"添加小组成员",
               listLoading:false,
               tableData:{

               },
               options:[],
               total:0,
               loading:false,
               dialogFormVisibles:false,
               multipleSelection:[],
               withdrawal:{
                   quitReason:"",//退出原因
                   groupCode:"",//小组编号
                   checkInMark:""//入住编号
               },
               select:[],
               from:{
                   checkInMark:""
               },
               form:{
                   checkInMark:[

                   ],//入住编号
                   groupCode:"",//小组编号
               },
               queryForm:{
                   elderlyCode:"",
                   institutionNumber: localStorage.getItem('institutionNumber'),
                   currPageNo:1,
                   limit:8
               }

           }

        },

        methods:{
            change(value){
                console.log(value)
                this.queryForm.elderlyCode=value
            },
            remoteMethod(query) {
                this.options=[]
                console.log(query)
                if (query !== '') {
                    this.loading = true;
                    setTimeout(() => {
                        this.loading = false;
                        let elderlycondition=query
                        searchelderlycondition({elderlycondition}).then(res =>{

                           if(res.data){
                               for(let i=0;i<res.data.length;i++){
                                   if(res.data[i].retreat==false){
                                       console.log(res.data[i])
                                       this.options.push(res.data[i])
                                   }
                               }
                           }






                        })
                    }, 200);
                } else {
                    this.options = [];
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection=val



            },
            getRowKeys(row) {

                return row.id;
            },
            speedupData() {

                var arr = this.multipleSelection;
                let multis = [];
                for (var i = 0; i < arr.length; i++) {
                    multis.push(arr[i].checkInMark);
                }
                this.form.checkInMark=multis

            },

            isDisabled(row,index){
                if(row.retreat==false){
                    return 1
                }else {
                    return 0
                }



                },


            Echo(){
                      if(this.tableData){
                          for (let i = 0; i < this.tableData.length; i++) {
                              for (let j = 0; j < this.select.length; j++) {

                                  if (this.select[j].checkInMark === this.tableData[i].checkInMark) {

                                      if(this.$refs.multipleTable!=undefined){

                                          this.$refs.multipleTable.toggleRowSelection(this.tableData[i], true);
                                          this.tableData[i].disable=true
                                          console.log(this.tableData)
                                      }
                                  }
                              }
                          }
                      }



            },
            showEdit(row) {


                this.select=[]


                this.queryForm.elderlyCode=""
                this.form.checkInMark=[]
                this.withdrawal.groupCode=row.groupCode
                this.form.groupCode=row.groupCode
                this.queryForm.currPageNo=1
                console.log(row.teamMembers)
                if(row.teamMembers){
                    for (let i=0;i<row.teamMembers.length;i++){
                        if(row.teamMembers[i].quitTime){

                        }else {
                            console.log(row.teamMembers[i])
                            this.select.push(row.teamMembers[i])
                        }
                    }

                }
                this.dialogFormVisible = true;

                    this.Echo()


                this.searchitem()
            },
            handleSizeChange(val) {
                 this.queryForm.limit = val;
                 this.searchitem();
                    this.Echo()

            },
            handleCurrentChange(val) {


                this.queryForm.currPageNo = val;
                this.searchitem();


                    this.Echo()



            },
            searchitem(id){

                this.listLoading=true
                if(id){
                    this.queryForm.currPageNo=1
                }else {

                }
                searchitem(this.queryForm).then(res =>{
                    console.log(res.data.data)

                        this.tableData=res.data.data


                    this.total=res.data.total

                    this.Echo()




                })
                setTimeout(() => {
                    this.listLoading = false;
                }, 500);
            },
            save(){
                  this.speedupData()
                  additem(this.form).then(res =>{

                    this.$message({
                        message: "成员添加成功",
                        type: 'success'
                    })
                    this.dialogFormVisible=false
                    this.$parent.search(this.$parent.queryForm.currPageNo=1)



                })
            },
            withdrawals(row){
                this.dialogFormVisibles=true
                console.log(row)
                this.withdrawal.checkInMark=row.checkInMark
            },
            savewithdrawal(){
                this.$baseConfirm("你确定退出此社团", null, async () => {
                    leave(this.withdrawal).then(res => {
                        this.$baseMessage("操作成功");
                        this.queryForm.currPageNo=1
                        this.dialogFormVisibles=false
                        this.dialogFormVisible=false
                        this.$parent.search(this.$parent.queryForm.currPageNo=1)
                    })

                })
                console.log(this.withdrawal)
            },
            close(){
                this.dialogFormVisible=false

            }
        }

    }
</script>

<style scoped>

</style>
